﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="keywords" content="jQuery DropDownList, List, ListBox, Popup List, jqxDropDownList, jqxListBox, List Widget, ListBox Widget, DropDownList Widget" />
    <meta name="description" content="The jqxListBox represents a widget that contains a list of selectable items." />
    <title id='Description'>In this demo is simulated the touch-device behavior of the jqxListBox.
    </title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.black.css" type="text/css" />
    <script type="text/javascript" src="../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            prepareDemo("listbox");
            var source = [{
                label: "Peppermint Hot Chocolate",
                value: "Chocolate Beverage",
                group: "Hot Chocolate"
            }, {
                label: "Salted Caramel Hot Chocolate",
                value: "Chocolate Beverage",
                group: "Hot Chocolate"
            }, {
                label: "White Hot Chocolate",
                value: "Chocolate Beverage",
                group: "Hot Chocolate"
            }, {
                label: "Caffe Americano",
                value: "Espresso Beverage",
                group: "Espresso"
            }, {
                label: "Caffe Latte",
                value: "Espresso Beverage",
                group: "Espresso"
            }, {
                label: "Caffe Mocha",
                value: "Espresso Beverage",
                group: "Espresso"
            }, {
                label: "Cappuccino",
                value: "Espresso Beverage",
                group: "Espresso"
            }, {
                label: "Caramel Brulee Latte",
                value: "Espresso Beverage",
                group: "Espresso"
            }, {
                label: "Caramel Macchiato",
                value: "Espresso Beverage",
                group: "Espresso"
            }, {
                label: "Peppermint Hot Chocolate",
                value: "Espresso Beverage",
                group: "Espresso"
            }, {
                label: "Cinnamon Dolce Latte",
                value: "Espresso Beverage",
                group: "Espresso"
            }, {
                label: "Eggnog Latte",
                value: "Espresso Beverage",
                group: "Espresso"
            }, {
                label: "Espresso",
                value: "Espresso Beverage",
                group: "Espresso"
            }, {
                label: "Espresso Con Panna",
                value: "Espresso Beverage",
                group: "Espresso"
            }, {
                label: "Espresso Macchiato",
                value: "Espresso Beverage",
                group: "Espresso"
            }, {
                label: "Flavored Latte",
                value: "Espresso Beverage",
                group: "Espresso"
            }, {
                label: "Gingerbread Latte",
                value: "Espresso Beverage",
                group: "Espresso"
            }, {
                label: "White Chocolate Mocha",
                value: "Espresso Beverage",
                group: "Espresso"
            }, {
                label: "Skinny Peppermint Mocha",
                value: "Espresso Beverage",
                group: "Espresso"
            }, {
                label: "Skinny Flavored Latte",
                value: "Espresso Beverage",
                group: "Espresso"
            }, {
                label: "Pumpkin Spice Latte",
                value: "Espresso Beverage",
                group: "Espresso"
            }, {
                label: "Caffe Vanilla Frappuccino",
                value: "Frappuccino Blended Beverage",
                group: "Frappuccino"
            }, {
                label: "Caffe Vanilla Frappuccino Light",
                value: "Frappuccino Blended Beverage",
                group: "Frappuccino"
            }, {
                label: "Caramel Brulee Frappuccino",
                value: "Frappuccino Blended Beverage",
                group: "Frappuccino"
            }, {
                label: "Caramel Brulee Frappuccino Light",
                value: "Frappuccino Blended Beverage",
                group: "Frappuccino"
            }, {
                label: "Eggnog Frappuccino",
                value: "Frappuccino Blended Beverage",
                group: "Frappuccino"
            }, {
                label: "Mocha Frappuccino",
                value: "Frappuccino Blended Beverage",
                group: "Frappuccino"
            }, {
                label: "Tazo Green Tea Creme Frappuccino",
                value: "Frappuccino Blended Beverage",
                group: "Frappuccino"
            }]

            // Create a jqxListBox
            $("#listbox").jqxListBox({ itemHeight: 30, source: source, width: '100%', height: '100%', theme: 'black' });
            initDemo("listbox");
        });
    </script>
    <style type="text/css">
        html, body
        {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript" src="simulator.js"></script>
</head>
<body>
    <div id="demoContainer" style="margin-left: 220px; width: 460px; height: 849px; overflow: hidden; background-image: url(../images/galaxys3.jpg);">
        <div id="container" style="margin-left: 40px; height: 630px; width: 376px; margin-top: 112px;">
            <div id='listbox'>
            </div>
        </div>
    </div>
</body>
</html>
